<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import { sleep } from '@/utils/sleep'
import type { IconType } from '@/components/PngIcon.vue'
import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const { play } = useSound(correctAnswerSfx)
const intro = useIntro({
  steps: [
    {
      element: '#start',
      intro: '请点击进入创作',
      position: 'top',
    },
  ],
}, [
  {
    target: 'start',
    posotionCallback(info: DOMRect) {
      return { x: info.left + 180, y: info.top + 70 }
    },
  },
])
const isShow = ref(false)
const set1 = setTimeout(async () => {
  intro.start()
  await sleep(400)
  isShow.value = true;
}, 700);
onBeforeUnmount(() => {
  intro.stop()
  isShow.value = false;
  console.log('index 组件实例被卸载之前调用')
  clearTimeout(set1)
})
interface FunctionListType {
  name: string
  icon: IconType
}
const functionList: FunctionListType[] = [
  {
    name: '一键成片',
    icon: 'oneclickCreate',
  },
  {
    name: '图文成片',
    icon: 'graphic',
  },
  {
    name: '拍摄',
    icon: 'shoot',
  },
  {
    name: 'AI作图',
    icon: 'aiDrawing',
  },
  {
    name: '创作脚本',
    icon: 'createScript',
  },
  {
    name: '录屏',
    icon: 'screenRecording',
  },
  {
    name: '提词器',
    icon: 'autocue',
  },
  {
    name: '美颜',
    icon: 'beauty',
  },
  {
    name: '超清画质',
    icon: 'highQuality',
  },
  {
    name: 'AI特效',
    icon: 'aiEffect',
  },
  {
    name: '一起拍',
    icon: 'shootTogether',
  },

]

const router = useRouter()
function entryCreate() {
  play()
  router.push('11/select')
}
</script>

<template>
  <div class="p-1.5em">
    <div class=" no-click "></div>
    <div class="bg-#333333 w-13em p-x-1em p-y-0.5em mb-1.5em rounded-lg">
      创作小达人上线啦~
    </div>
    <div class="grid grid-cols-5 gap-y-2em">
      <div v-for="item in functionList" :key="item.name" class="flex-col-center ">
        <div class="bg-#333333 flex-center rounded-full w-3.5em h-3.5em">
          <png-icon :icon="item.icon" />
        </div>
        <div class="py-1em">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div id="start" class="h-100px bg-start flex-center m-auto m-t-1em hover:brightness-50" @click.stop="entryCreate" />
    <div :class="{ border: isShow }"></div>
  </div>
  <TabBar current-tab="剪辑" />
</template>

<style scoped>
@media screen and (min-width:440px) {
  .border {
    position: absolute;
    top: 429px;
    right: 10px;
    width: 379px !important;
    height: 123px !important;
    border: 6px solid #FDDE40 !important;
    border-radius: 5px;
  }
}
@media screen and (max-width:440px) {
  .border {
    position: absolute;
    top: 100vw;
    right: 2vw;
    width: 96vw !important;
    height: 28vw !important;
    border: 6px solid #FDDE40 !important;
    border-radius: 5px;
  }
}
@media screen and (max-width:390px) {
  .border {
    position: absolute;
    top: 110vw;
    right: 2vw;
    width: 96vw !important;
    height: 31.5vw !important;
    border: 6px solid #FDDE40 !important;
    border-radius: 5px;
  }
}
@media screen and (max-width:375px) {
  .border {
    position: absolute;
    top: 110vw;
    right: 2vw;
    width: 96vw !important;
    height: 31.5vw !important;
    border: 6px solid #FDDE40 !important;
    border-radius: 5px;
  }
}

.bg-start {
  background-image: url('@/assets/common/start_create.png');
  background-size: 100% 100%;
}

.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>
